<template>
    <div>
        <div class="table">
            <el-select v-model="coach" class="m-2" placeholder="请选择课程教练">
               <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
               />
            </el-select>
            <el-button type="primary" class="search">查询</el-button>
            <el-button class="search">复制课表</el-button>
            <el-button class="search">添加排期</el-button>
        </div>
        <div class="table">
          <el-button class="search">日历</el-button>
          <el-button class="search">列表</el-button>
        </div>

        <div class="table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="courseName" label="课程名称" width="160" />
                <el-table-column prop="myCoach" label="教练" width="100"/>
                <el-table-column prop="stadium" label="场馆" />
                <el-table-column prop="place" label="场地" />
                <el-table-column prop="time" label="课程时间" />
                <el-table-column prop="appointment" label="预约人数" width="100"/>
                <el-table-column fixed="right" label="操作" width="200">
                    <template #default>
                        <el-button link type="primary" size="small" @click="changeInfo"
                        >编辑</el-button
                        >
                        <el-button link type="primary" size="small">预约记录</el-button>
                        <el-button link type="primary" size="small"  @click="deleteInfo">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pages-box">
          <el-pagination background layout="prev, pager, next" :total="50"/>
        </div>
    </div>
    
    

</template>

<script lang="ts">
import { defineComponent,ref } from 'vue';


export default defineComponent({
    name: "CourseSchedule",
    setup(){
        const courseName=ref('')
        const coach=ref('')
        const options = [
            {
              value: 'Option1',
              label: 'Option1',
            },
            {
              value: 'Option2',
              label: 'Option2',
            },
            {
              value: 'Option3',
              label: 'Option3',
            },
            {
              value: 'Option4',
              label: 'Option4',
            },
            {
              value: 'Option5',
              label: 'Option5',
            }
        ]

        const tableData = [
            {
               courseName: '魔鬼速度减脂课程',
               myCoach: '大明',
               stadium:'健身多功能馆',
               place:'成人团课区',
               time:'2022-03-20 20:30至21:30',
               appointment: '100',
            },
            {
               courseName: '速度减脂课程',
               myCoach: '大明',
               stadium:'健身多功能馆',
               place:'成人团课区',
               time:'2022-03-20 20:30至21:30',
               appointment: '100',
            },
            {
               courseName: '魔鬼速度减脂课程',
               myCoach: '小明',
               stadium:'健身多功能馆',
               place:'成人团课区',
               time:'2022-03-20 20:30至21:30',
               appointment: '100',
            },
         
        ]
        //点击编辑
        function changeInfo(){
            
        }
        //点击删除
        function deleteInfo(){

        }
        
        
         
       

        return{
            courseName,
            coach,
            options,
            tableData,
            changeInfo,
            deleteInfo

        }
    }

})
</script>
<style scoped>
    /* 课程名称查询 */
    .course-name{
        width:180px;
        margin-right:10px;
    }
    .m-2{
        margin-right:10px;
    }
    /* 查询按钮 */
    .search{
        width:100px;
    }
    .table{
        padding:10px 20px;
    }
    /* 分页 */
    .pages-box{
        padding:10px 20px;
        display: flex;
        justify-content: right;
    }

</style>